<template>
    <div>
        <h1>Articles</h1>
        <ul>    
            <li v-for="article in articls" :key="article.id" @click="jumpto(article.id)">
                {{ article.id }}
                {{ article.title }}
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const route = useRouter();

const articls = ref([
{
    id:1,
    title:'sunny'
},
{
    id:2,
    title:'moon'
},{
    id:3,
    title:'star'
}
])

// methods
const jumpto = (articleId) => {
    //用 name 的一个好处 就是 改变路由嵌套层级的时候 也不用变了
   route.push({ name: 'details', params: { id: articleId } });
   //  same as link 
//    window.location.href = `/articles/article/${articleId}`;
}

</script>

<style  scoped>

</style>